/*

write by wuweiwei
*/
(function(){

var svgConverter = function(options){
	/*
	options={
		svgElement,
		sourceElement,
		imageElement
	}
	*/
	var canvas_w,canvas_h,canvas_x,canvas_y;
	this.svg = options.svgElement;
	this.sourceElement = options.sourceElement;
	this.imageElement = options.imageElement;
	this.svgElement = options.svgElement;

	this.canvasAr = options.sourceElement.getElementsByTagName("canvas");

	this.cloneNodes();
	console.log(this.svgElement);
	this.createCanvas();
	this.drawCanvas();
	this.drawImageFromData();

	/*无px单位*/
	// canvas_x = canvas.offsetLeft;
	// canvas_y = canvas.offsetTop;
	// canvas_w = canvas.offsetWidth;
	// canvas_h = canvas.offsetHeight;

	// var data = "data:image/svg+xml;charset=utf-8,";
	// data = data + svg.innerHTML;
	// var img = new Image();
	// img.src = data;

	// var result = document.getElementById("result");

	// var saveCanvas = document.createElement('canvas');
	// saveCanvas.setAttribute("width","300");
	// saveCanvas.setAttribute("height","300");
	// var context = saveCanvas.getContext('2d');

	// context.drawImage(canvas,canvas_x,canvas_y,canvas_w,canvas_h);
	// context.drawImage(img, 0, 0);

	// result.src = saveCanvas.toDataURL('image/png');
	
	this.imageElement.src = this.saveCanvas.toDataURL('image/png');

};

svgConverter.prototype.cloneNodes = function(){
	/*(1)*/
	var len,i,childNodes,svgObject,cloneNode;
	len = this.sourceElement.childNodes.length;
	childNodes = this.sourceElement.childNodes;

	for(i=0;i<len;i++)
	{
		if(childNodes[i]!=undefined&&childNodes[i].nodeType == 1)
		{
			svgObject = document.createElementNS("http://www.w3.org/2000/svg","foreignObject");
			cloneNode = childNodes[i].cloneNode(true);
			cloneNode.setAttribute("xmlns","http://www.w3.org/1999/xhtml");
			// svgObject.setAttribute("x",childNodes[i].offsetLeft);
			// svgObject.setAttribute("y",childNodes[i].offsetTop);
			// svgObject.setAttribute("width",childNodes[i].offsetWidth);
			// svgObject.setAttribute("height",childNodes[i].offsetHeight);
			svgObject.appendChild(cloneNode);
			this.svgElement.appendChild(svgObject);
		}
	}

};

svgConverter.prototype.createCanvas = function(){
	/*(2)*/
	var w,h;
	w = this.sourceElement.offsetWidth;
	h = this.sourceElement.offsetHeight;

	var saveCanvas = document.createElement('canvas');
	saveCanvas.setAttribute("width",w);
	saveCanvas.setAttribute("height",h);
	var saveContext = saveCanvas.getContext('2d');
	this.saveCanvas = saveCanvas;
	this.saveContext = saveContext;
};

svgConverter.prototype.drawCanvas = function(){
	/*(3)*/
	var len ,i ,canvasAr,canvas;
	var canvas_x,canvas_y,canvas_w,canvas_h;
	var canvasParent;
	canvasAr = this.canvasAr;
	len = canvasAr.length;
	for(i=0;i<len;i++)
	{
		canvas = canvasAr[i];
		canvasParent = canvas.parentNode.parentNode;
		canvas_x = canvasParent.offsetLeft;
		canvas_y = canvasParent.offsetTop;
		canvas_w = canvas.offsetWidth;
		canvas_h = canvas.offsetHeight;
		console.log(canvasParent.style.left,canvas_y);
		this.saveContext.drawImage(canvas,canvas_x,canvas_y,canvas_w,canvas_h);
	}
};
svgConverter.prototype.drawImageFromData = function(){
	/*(4)*/
	var data = "data:image/svg+xml;charset=utf-8,";
	data = data + this.svgElement.parentNode.innerHTML;
	var img = new Image();
	img.src = data;
	this.saveContext.drawImage(img, 0, 0);
};

window.svgConverter = svgConverter;
})()













